<template>
    <div class="com-container" @dblclick="reSetMap">
            <div class="com-echart" ref="map_ref">
            </div>
             <ReSize :comName="'map'"></ReSize>
        </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted,watch } from 'vue';
import axios from 'axios';
import { getMapDataService } from '@/api/index'
import { markRaw } from 'vue';
import { getProvinceMapInfo } from '@/util/map_utils'
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore=useThemeStore()

const chartInstance = ref(null)
const map_ref = ref(null)
//缓存机制
const cacheMap=ref({})
const initChart = async() => {
    chartInstance.value = markRaw(echarts.init(map_ref.value, themeStore.currentTheme))
    const mapData=(await axios.get('/static/map/china.json')).data
    echarts.registerMap('china',mapData)
    //分离option的思想，将数据与其他样式的配置分离开，便于维护
    const initOption = {
        title:{
            text:'商家分布',
            left: 20,
            top: 20,
        },
       geo:{
        type:'map',
        map:'china',
        top:'5%',
        bottom:'5%',
        itemStyle:{
            areaColor:'#2e72bf',
            borderColor:'#333'
        }
       },
       legend:{
        left:'5%',
        bottom:'5%',
        orient:'vertical'
       }
    }
    chartInstance.value.setOption(initOption)


   chartInstance.value.on('click',async(arg)=>{
        const data=getProvinceMapInfo(arg.name)
        if(!cacheMap.value[data.key]){
             const provinceMap = (await axios.get(data.path)).data
            echarts.registerMap(data.key, provinceMap)
            cacheMap.value[data.key]=1
        }
       
         const changeOption={
            geo:{
                map: data.key
            }
         }
         chartInstance.value.setOption(changeOption)
   })
}



const updateChart = () => {
    const seriesArr=dataList.value.map(e=>{
        return {
            type:'effectScatter',
            rippleEffect:{
                scale:5,
                brushType:'stroke'
            },
            name:e.name,
            data:e.children,
            //在地图中使用散点图，需要配置地图坐标系
            coordinateSystem:'geo'
        }
    })
    const legendArr=dataList.value.map(e=>e.name)
    const dataOption = {
        legend:{
            data:legendArr
        },
       series:seriesArr

    }
    chartInstance.value.setOption(dataOption)
}



const dataList = ref([])
const getMapData =ret => {
    dataList.value = ret
    updateChart()
}

const screenAdaptor = () => {
     const titleFontSize = map_ref.value.offsetWidth / 100 * 3.6
    const adaptOption = {
       title:{
        textStyle:{
            fontSize: titleFontSize
        }
       },
       legend:{
        itemWidth: titleFontSize/3,
        itemHeight: titleFontSize/3,
        itemGap: titleFontSize / 3,
        textStyle: {
                fontSize: titleFontSize/3,
            }
       }
    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}


const reSetMap=()=>{
    const reSetOption={
        geo:{
            map:'china'
        }
    }
    chartInstance.value.setOption(reSetOption)
}

SocketService.registerCallBack('mapData', getMapData)

defineExpose({
    screenAdaptor
})

//监视主题变化
watch(()=>themeStore.currentTheme,()=>{
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
})

onMounted(async () => {
    initChart()
    SocketService.send({
        action: 'getData',
        socketType: 'mapData',
        chartName: 'map',
        value: ''
    })
    window.addEventListener('resize', screenAdaptor)
    screenAdaptor()
})
onUnmounted(() => {
    window.removeEventListener('resize', screenAdaptor)
})

</script>

<style scoped>
.com-container{
    position: relative;
}

</style>